<?php
/*
 * @Descripttion: 
 * @Author: 荷逸
 * @email: 563428234@qq.com
 * @Date: 2021-02-19 21:29:04
 */

/**
 * 上传多图
 * @author yupoxiong<i@yufuping.com>
 */

namespace generate\field;

class CropperImage extends Field
{
    public static $html = <<<EOF
            <div class="form-group ">
            <label for="[FIELD_NAME]"  class="col-sm-2 control-label" id="thumbName">[FORM_NAME]</label>
            <div class="col-sm-10 col-md-4">
                <img src="{\$data.[FIELD_NAME]|default=''}" id="srcimg[FIELD_NAME]" class="layui-upload-img  srcimgavatar">
                <input type="hidden" name="[FIELD_NAME]" id="inputimg[FIELD_NAME]" value="{\$data.[FIELD_NAME]|default=''}" >
                <div class="layui-input-inline layui-btn-container" style="width: auto;">
                    <div class="layui-btn" id="editimg[FIELD_NAME]">请上传[FORM_NAME]</div>
                </div>
            
            </div>
        </div>
        <style>
            .srcimgavatar{
                width: 300px;
                display: block;
                margin: 1% 0px;
            }
        </style>
        <script>
            $(function(){
                if (typeof (layui) == "undefined") {
                    location.reload(true)
                }
                layui.config({
                base: '/static/admin/plugins/cropper/js/' //layui自定义layui组件目录
            }).use(['form', 'croppers'], function () {

                var $ = layui.jquery
                    , form = layui.form
                    , croppers = layui.croppers
                    , layer = layui.layer;
                //创建一个头像上传组件
                croppers.render({
                    elem: '#editimg[FIELD_NAME]'
                    , saveW: 555     //保存宽度
                    , saveH: 355
                    , mark: 555 / 355    //选取比例
                    , area: '900px'  //弹窗宽度
                    , url: "{:url('upfile/upload')}"  //图片上传接口返回和（layui 的upload 模块）返回的JOSN一样
                    , done: function (data) { //上传完毕回调
                        $("#inputimg[FIELD_NAME]").val(data.url);
                        $("#srcimg[FIELD_NAME]").attr('src', data.url);
                    }
                });

            });
            })
        
        </script>
\n
EOF;

public static $rules = [
    'required'   => '非空',
    'file_size'  => '文件大小限制',
    'file_image' => '图片类型',
    'regular'    => '自定义正则'
];


    public static function create($data)
    {
        $html = self::$html;
        $html = str_replace('[FORM_NAME]', $data['form_name'], $html);
        $html = str_replace('[FIELD_NAME]', $data['field_name'], $html);
        return $html;
    }
}